<template>
    <div>
        <!-- 顶部导航 -->
        <van-nav-bar title="我的收获地址" left-text="返回" @click-left="onClickLeft"  class="leader"  left-arrow>
            <template #right >
               <van-icon name="ellipsis" size='26px' color='#333' class="pullTab" @click.stop="ShowHidden = !ShowHidden" />
               <Pulltab 
                    v-if="ShowHidden" 
                    @click.stop=""
               />
            </template>
        </van-nav-bar>
        <div class="main">
            <van-address-list
                v-model="chosenAddressId"
                :list="addresslist"
                default-tag-text="默认"
                @add="onAdd"
                @edit="onEdit"
                @select="onselect"
            />
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { AddressList } from 'vant';
import Pulltab from '../components/Pulltab.vue'
Vue.use(AddressList);

export default {
    components: {
            Pulltab,
        },
    data() {
        return {
            ShowHidden: false,
            chosenAddressId: '1',
        };
    },
    computed: {
        addresslist(){
            return this.$store.state.address.adsList
        }
    },
    methods: {
        jump() {
            console.log(this.$route.query.n);
            if(this.$route.query.n==2){
                this.$router.push('/checkout')
            }else{
                this.$router.push('/myspec')
            }
        },
        onAdd(index) {
            this.$router.push({path:'/addressedit',query:{index:-1}})
        },
        onEdit(item, index) {
            this.$router.push({path:'/addressedit',query:{index,item}})
        },
        onselect(index,item){
            console.log(index,item);
            this.$store.commit('address/addressInfo',{index,item})
        },
        HiddenClick () {
            this.ShowHidden = false
        },
        onClickLeft(){
            this.$router.go(-1)
        }
    },
    mounted () {
        document.addEventListener('click', this.HiddenClick)
    },
};
    
</script>

<style lang="less" scoped>
.main{
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 50px;
    overflow-x: hidden;
    overflow-y: scroll;
    margin: auto;
    background: #f5f5f5;
}
::v-deep .van-nav-bar__left i{
    color:#444;
    font-size: 20px;
}
::v-deep .van-nav-bar__left span,::v-deep .van-nav-bar__title{
    color: #444;
    font-size: 16px;
}
</style>